<template>
    <div>
        <div id="w-color-picker" class="fit-content">
            <div id="show-picker" class="w-showResult fit-content">
                <div class="w-input-color"></div>
                <div @click="handleTrigger" class="w-show-bg" :style="{ background: currentColor }"></div>
            </div>
            <div>
                <div v-show="popView" id="w-picke-box" class="w-color-picke-box">
                    <div class="w-color-type-heard flex-center-between" :style="{ marginBottom:!gradientcolor?'10px':'0px'}">
                        <label @click="changType(0)" :class="!gradientcolor ? 'w-selectbtn' : 'w-nobtn'">单色</label>
                        <label @click="changType(1)" :class="gradientcolor ? 'w-selectbtn' : 'w-nobtn'">渐变</label>
                    </div>
                    <div v-show="gradientcolor">
                        <WsliderGradient ref="wslidergradient" :color="color" />
                    </div>
                    <Wpanel ref="wpanel" :color="color" />
                    <div class="w-color-alpha flex-center-between">
                        <div class="w-color-alpha-box">
                            <WsliderColor ref="wsliderColor" :color="color" />
                            <WsliderAlpha v-show="showAlpha" ref="wsliderAlpha" :color="color" />
                        </div>
                        <WPreview ref="wPreview" :color="color" />
                    </div>
                    <div class="w-oper-box">
                        <div class="w-cancal-btn" @click="cancal">取消</div>
                        <div class="w-sure-btn" @click="sure">确定</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import Color from './color.js';
import WsliderGradient from './w-slider-gradient';
import Wpanel from './w-panel';
import WsliderColor from './w-slider-color';
import WsliderAlpha from './w-slider-alpha';
import WPreview from './w-preview';
export default {
    name: 'wcolorpicker',
    props: {
        value: String,
        //是否显示透明度
        showAlpha: {
            type: Boolean,
            default: false
        },
        //输出颜色格式
        colorFormat: {
            type: String,
            default: 'rgb'
        },
        //渐变色点
        gradientDots:{
            type: Number,
            default:2
        }
    },
    components: {
        WsliderGradient,
        Wpanel,
        WsliderColor,
        WsliderAlpha,
        WPreview,
    },
    data() {
        const color = new Color({
            enableAlpha: this.showAlpha,
            format: this.colorFormat,
            gradientDots:this.gradientDots
        });
        return {
            color,
            popView: false,
            direction: true,  //弹框向下为true 向上为false
            currentColor: ''
        };
    },
    computed: {
        gradientcolor() {
            return this.color.get('gradientcolor')
        }
    },
    watch: {
        //因为渐变色选择条隐藏展示会产生高度变化
        gradientcolor: {
            handler(val) {
                this.updateView();
            },
            immediate: true
        },
        value: {
            handler(val) {
                if (!val) {
                    this.popView = false;
                } else {
                    this.currentColor = val;
                }
            },
            immediate: true
        }
    },
    mounted() {
        window.addEventListener('scroll', e => {
            this.updateView()
        });

        window.addEventListener('click', e => {
            let tp = document.querySelector("#w-color-picker");
            if (tp) {
                if (!tp.contains(e.target)) {
                    this.popView = false;
                }
            }
        });
    },
    methods: {
        changType(type) {
            if (type === 0) {
                this.color.set('gradientcolor', false)
            } else {
                this.color.set('gradientcolor', true)
            }
        },
        updateView() {
            this.$nextTick(() => {
                let viewHeight = document.documentElement.clientHeight;
                //当前点击的元素的信息
                const { top: eventTop, left: eventLeft, width: eventWidth, height: eventHidth } = document.querySelector('#show-picker').getBoundingClientRect();
                const { width: pickerWidth, height: pickerHidth } = document.querySelector('#w-picke-box').getBoundingClientRect();
                // console.log('viewHeight', viewHeight)
                // console.log('pickerHidth', pickerHidth)
                // console.log('eventTop', eventTop)
                // console.log("viewHeight - (eventTop + pickerHidth)", viewHeight - (eventTop + pickerHidth))

                if (viewHeight - (eventTop + pickerHidth) > 30) {
                    document.querySelector('#w-picke-box').style.marginTop = '0px'
                    this.direction = true
                } else {
                    document.querySelector('#w-picke-box').style.marginTop = (0 - pickerHidth - eventHidth) + 'px';
                    this.direction = false;
                }
            })
        },
        handleTrigger() {
            this.popView = !this.popView;
            //可视区域高度
            this.updateView();
            if (this.popView == true) {
                //初始化颜色
                this.$nextTick(() => {
                    this.color.init(this.currentColor);
                    this.$refs.wslidergradient.updateView();
                    this.$refs.wpanel.updateView();
                    this.$refs.wsliderColor.updateView();
                    // this.$refs.wPreview.updateView();
                    this.$refs.wsliderAlpha.updateView();
                })

            }

        },
        sure() {
            if (this.gradientcolor == true) {
                // console.log("渐变色", this.color.gradientcolor)
                this.$emit('input', this.color.gradientcolorValue);
            } else {
                // console.log("单色", this.color.colorValue)
                this.$emit('input', this.color.colorValue);
            }
            this.popView = false;
            this.$emit('Confirm');
        },
        cancal() {
            this.$emit('input', '');
            this.$emit('cancal');
            this.currentColor = '';
            this.popView = false;
            //恢复
        },
    }
}
</script>
  
<style scoped>
@import './commom.css';

.w-showResult {
    display: flex;
    align-items: center;
    position: relative;
}


.w-input-color {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    padding-left: 40px;
    height: 40px;
}


.w-show-bg {
    /* background-color: blue; */
    display: inline-block;
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    font-size: 0;
    position: absolute;
    cursor: pointer;
    left: 5px;
}

/* 顶部切换按钮*/
.w-color-picke-box {
    padding: 10px;
    position: absolute;
    z-index: 99999;
    box-sizing: content-box;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.w-color-type-heard {
    background: #f1f1f1;
    border-radius: 6px;
    width: 100px;
    padding: 4px;
    cursor: pointer;
    font-size: 13px;
}

.w-selectbtn {
    background: #ffff;
    padding: 3px 10px;
    border-radius: 2px;
}

.w-nobtn {
    background: transparent;
    padding: 3px 10px;
    border-radius: 2px;
}


/* 颜色条和透明度 */
.w-color-alpha {
    padding: 5px 0px;
    width: var(--main-slider-width)
}

.w-color-alpha-box {
    height: var(--main-view-width);
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    align-content: space-around;
}


.w-oper-box {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
}



.w-sure-btn {
    padding: 7px 15px;
    font-size: 12px;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    font-weight: 500;
}

.w-sure-btn:hover {
    background: #fff;
    border-color: #409eff;
    color: #409eff;
}

.w-cancal-btn {
    color: #409eff;
    font-size: 12px;
    padding: 7px 15px;
    cursor: pointer;
    font-weight: 500;
}

.w-cancal-btn:hover {
    color: #66b1ff;
}
</style>
  